<template>
  <div class="securityresearch">
      <div class="title">
        <el-divider content-position="center">个人技能</el-divider>
        <p> </p>
        <p></p>
      </div>
      <div class="skill">
        <span v-for="(item, index) in skill" :key="index" :class="'v'+(index)">{{ item }}</span>
        <!-- <span class='v'>Vue</span>
        <span class='js'>JS</span>
        <span class='css'>CSS</span>
        <span class='echarts'>Echarts</span>
        <span class='webpack'>webpack</span>
        <span class='python'>python</span>
        <span class='linux'>linux</span> -->
      </div>
  </div>
</template>
<script>
export default {
  name: 'AboutSkills',
  props: {
    skills: {
      type: Array
    }

  },

  data () {
    return {
      skill: []
    }
  },
  created () {
    this.skill = this.skills
    console.log('进入技能页面', this.skills)
  }
}
</script>
<style>
  .securityresearch .title p .el-tag{
    margin: 0px 5px;
    cursor: pointer;
  }
  .securityresearch .box-card .text{
    text-align: left;
  }
</style>
<style scoped>
  .securityresearch{
    font-size: 14px;
    padding: 0px 100px;
  }
  .title p{
    color: #8c8888;
    font-size: 15px;
    margin-bottom: 80px;
    text-align: center;
  }
  .content p{
    font-size: 20px;
    color: #8c8888;
  }
  .skill{
    margin: 100px 0px;
    position: relative;
    width: auto;
    height: 300px;
  }
  .skill>span{
    display: inline-block;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    position: absolute;
  }
    span.v0{
    background-color: rgba(102,153,204,1) ;
    width: 200px;
    height: 200px;
    left: 43%;
    line-height: 200px;
    font-size: 28px;
    z-index: 100;

  }
  span.v1{
    background-color: rgba(255,153,102,0.5);
    width: 130px;
    height: 130px;
    line-height: 130px;
    font-size: 26px;
    left: 40%;
    bottom: 280px;
    z-index: 0;
  }
  span.v2{
    background-color: rgba(102,204,204,0.8);
    width: 90px;
    height: 90px;
    font-size: 26px;
    line-height: 90px;
    font-size: 26px;
    left: 35%;
    top: 100px;
    z-index: 0;
  }
  span.v3{
    background-color: rgba(255,153,153,0.7) ;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 18px;
    left: 59%;
    bottom: 10px;
    z-index: 0;
  }
  span.v4{
    background-color: rgba(255,204,51,0.8);
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 13px;
    left: 30%;
    top: 20px;
    z-index: 0;
  }
  span.v5{
    background-color: rgba(204,102,102,0.5) ;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    left: 51%;
    bottom: -10px;
    z-index: 0;
  }
  span.v6{
    background-color: rgba(153,153,255,0.8) ;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    left: 60%;
    top: -50px;
    z-index: 0;
  }
</style>
